<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">
        <div class="sideba">
          <div class="right-sidebar">
            <div class="cewen-bar">阈值管理</div>
            <div class="conn-bar" id="style-1">
              <div class="item-conn lie-bg" @click="zuzhi()">组织管理</div>
              <div class="item-conn lie-bg" @click="renyuan()">人员管理</div>
              <div class="item-conn lie-bg" @click="yuzhi()">阈值管理</div>
              <!-- <div class="item-conn lie-bg1">实时数据</div>
              <div class="item-conn lie-bg" @click="chaobiao()">抄表数据</div> -->
            </div>
          </div>
        </div>

        <div style="text-align: left;" class="main-dianli-bottom" id="style-1">
          <div class="mainbg-tit">实时数据</div>
          <!-- 一组结束 -->
          <div class="nongdu-top">
            <div class="zuti">配电所选择:</div>
            <div class="pici-xuanze">
              <el-select
                v-model="substationValue"
                placeholder="请选择"
                @change="isStation"
              >
                <el-option
                  v-for="item in substationList"
                  :key="item.deptId"
                  :label="item.name"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="con-dianvv1" style="padding: 10px">
            <div v-for="(item, index) in equipmentList" :key="index">
              <div
                style="
                  padding-left: 10px;
                  height: 30px;
                  line-height: 30px;
                  width: 100%;
                  color: #fff;
                  border-bottom: 1px solid #1e3999;
                "
              >
                <div>
                  {{ item.dept_name }}
                </div>
              </div>
              <div class="qieshuj">
                <div
                  v-for="(ite, ind) in item.devices_data"
                  :key="ind"
                  class="qiehua11"
                >
                  <div class="grid-content bg-purple">
                    <div class="shishi-top">
                      <div
                        class="roseChart"
                        style="height: 80%; width: 100%"
                      ></div>
                      <div
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: space-around;
                          align-items: center;
                        "
                      >
                        <div class="shishi-wen">{{ ite.device_name }}</div>
                        <el-button type="text" @click="opentan(ite.device_id)"
                          >本日趋势</el-button
                        >
                      </div>

                      <!-- <div class="qvshi">
                  <el-button type="text" @click="opentan">当日趋势</el-button>
                </div> -->
                      <!-- <div class="xuananniu">
                        <el-tag
                          type=""
                          style="padding: 0px 10px"
                          effect="dark"
                          >{{ ite.status || "在线" }}</el-tag
                        >
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-dialog title="当日趋势" :append-to-body="true" :visible.sync="dialogTableVisible">
            <div class="dangri">
              当日总能耗：{{ tanzxlist.sum }}{{ tanzxlist.unit
              }}
            </div>
            <div id="zhexianceshi"></div>
            <div
              class="tableyang"
              style="height: 320px; overflow-x: hidden; overflow-y: auto"
            >
              <el-table :data="gridData">
                <el-table-column
                  property="device_name"
                  label="设备名称"
                  width="200"
                ></el-table-column>
                <el-table-column
                  property="ele_count"
                  label="用电量"
                  width="150"
                ></el-table-column>
                <el-table-column
                  property="unit"
                  label="单位"
                  width="150"
                ></el-table-column>
                <el-table-column
                  property="ts"
                  label="时间"
                ></el-table-column>
              </el-table>
            </div>
          </el-dialog>
        </div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
// import exceljs from "exceljs";
export default {
  components: { Top },
  data() {
    var validatepasstwo = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("报警阈值不能为空"));
      } else if (value < this.chongzhiform.one) {
        callback(new Error("报警值必须大于预警值"));
      } else {
        callback();
      }
    };
    return {
      substationValue: "",
      substationList: [],
      equipmentList: [],
      ceshilist: [],

      dialogTableVisible: false,
      baojing: 0, //不想
      total: 0,
      pageSize: 12,
      current: 1,
      currentIndex: 0,
      pId: "",
      formLabelWidth: "100px",

      dialogchongzhiVisible: false,
      chongzhiform: {
        id: "",
        one: "",
        two: "",
      },
      chongzhiRules: {
        one: [{ required: true, message: "预警阈值不能为空", trigger: "blur" }],
        two: [{ required: true, validator: validatepasstwo, trigger: "blur" }],
      },

      userlist: [],

      tanzxlist: [],
      popupList:{},
      gridData: [],
      options: [
        {
          value: "选项1",
          label: "冠县配电所",
        },
        {
          value: "选项2",
          label: "聊城东配电所",
        },
      ],
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted() {
    this.getReallist();
    // this.drawRose([]);
  },
  created() {
    this.getseletop();
  },
  methods: {
    getseletop() {
      this.$apiv.setsectlt({}).then((res) => {
        console.log(res, "选择框");
        this.substationList = res.data;
        // this.substationList = [
        //   { id: 1, name: "聊城东" },
        //   { id: 2, name: "冠县" },
        // ];
        this.substationValue = this.substationList[0].deptId;
        this.getReallist();
      });
    },
    isStation(val){
      console.log(val,"选择的站点")
      this.substationValue=val
      this.getReallist()
    },
    opentan(id) {
      this.dialogTableVisible = true;
      this.jieshouid = id;
      console.log(id, "传递的id");
      this.$nextTick(() => {
        this.tanzhe(this.jieshouid);
      });
      this.tanbiao(id);
    },
    // 弹窗内折线数据
    tanzhe(id) {
      // this.ceshizhexian();
      this.$apiv
        .realTimeTrend({
          device_id: id,
          table:false,
        })
        .then((res) => {
          console.log("弹窗内折现数据", res);
          this.tanzxlist = res.data;
          this.popupList=this.tanzxlist.line_data
          this.$nextTick(() => {
            this.ceshizhexian(
              this.popupList.x_list,
              this.popupList.y_list,
              this.tanzxlist.unit
            );
            console.log("11111111111");
          });
        })
        .catch((res) => {
          console.log("弹窗内折现数据error");
        });
    },
    ceshizhexian(xval, yval, danwei) {
      let echarts = require("echarts");
      echarts.init(document.getElementById("zhexianceshi")).dispose();
      let zhexian = echarts.init(document.getElementById("zhexianceshi"));
      let options = {
        tooltip: {
          trigger: "axis",
          formatter: `{b}<br/>{c}${danwei}`,
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        legend: {
          data: [],
          textStyle: {
            color: "#DBDBDB",
            fontSize: 12,
            fontWeight: 0,
          },
        },
        grid: {
          top: "30px",
          left: "30px",
          right: "20px",
          bottom: "20px",
          // containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3", // 坐标值的具体的颜色
              },
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            // data: [1, 2, 3, 4, 5],
            data: xval,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#1caef6",
              },
            },

            splitLine: {
              //网格线
              lineStyle: {
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "rgba(255, 255, 255, 0.1)",
              },
              show: true, //隐藏或显示
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3", // 坐标值的具体的颜色
              },
            },
          },
        ],
        series: {
          name: "",
          type: "line",
          // tooltip: {
          //   valueFormatter: function (value) {
          //     return value + " °C";
          //   },
          // },
          smooth: true, //是否平滑
          showAllSymbol: false,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "none",
          // symbolSize: 10,
          lineStyle: {
            normal: {
              color: "#3598cc",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          // label: {
          //   show: false,
          //   position: "top",
          //   textStyle: {
          //     color: "#EAEA26",
          //   },
          // },
          itemStyle: {
            color: "#3598cc",
            borderColor: "#fff",
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
          },
          tooltip: {
            // show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(92,188,218,0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(92,188,218,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(92,188,218, 0.9)",
              shadowBlur: 20,
            },
          },
          // data: [10, 20, 30, 40, 50],
          data: yval,
        },
      };
      zhexian.setOption(options);
      window.addEventListener("resize", zhexian.resize);
    },
    tanbiao(id) {
      this.$apiv
        .realTimeTrend({
          device_id: id,
          table:true,
        })
        .then((res) => {
          console.log("弹窗内表格数据", res);
          this.gridData = res.data.table_data;
        })
        .catch((res) => {
          console.log("弹窗内表格数据error");
        });
    },
    // 通过选择配电所，获取下方数据
    getReallist() {
      console.log(this.substationValue, "获取实时数据");
      this.$apiv
        .realTime({
          dept_id: this.substationValue,
        })
        .then((res) => {
          console.log(res, "实时数据");
          this.equipmentList = res.data;
          this.$nextTick(() => {
            this.equipmentList.forEach((item, index) => {
              item.devices_data.forEach((ite, ind) => {
                this.ceshilist.push(ite);
                // for(var i=0;i<this.ceshilist.length;i++){
                // }
                // this.drawRose(ite.value);
              });
            });
            console.log("ceshi", this.ceshilist);
            this.drawRose(this.ceshilist);
          });
        })
        .catch((res) => {
          console.log("实时数据error");
        });
      // this.equipmentList = [
      //   {
      //     device_data: [
      //       {
      //         id: 81,
      //         name: "25#面包 设备1",
      //         status: 1,
      //         unit: null,
      //         value: "6868.8",
      //       },
      //       {
      //         id: 81,
      //         name: "25#面包 设备1",
      //         status: 1,
      //         unit: null,
      //         value: "6868.8",
      //       },
      //       {
      //         id: 81,
      //         name: "25#面包 设备1",
      //         status: 1,
      //         unit: null,
      //         value: "6868.8",
      //       },
      //     ],
      //     workplace_name: "面包车间",
      //   },
      //   {
      //     device_data: [
      //       {
      //         id: 81,
      //         name: "25#面包 设备1",
      //         status: 1,
      //         unit: null,
      //         value: "6868.8",
      //       },
      //     ],
      //     workplace_name: "面包车间",
      //   },
      //   {
      //     device_data: [
      //       {
      //         id: 81,
      //         name: "25#面包 设备1",
      //         status: 1,
      //         unit: null,
      //         value: "6868.8",
      //       },
      //     ],
      //     workplace_name: "面包车间",
      //   },
      // ];
      // this.$nextTick(() => {
      //   this.equipmentList.forEach((item, index) => {
      //     item.device_data.forEach((ite, ind) => {
      //       this.ceshilist.push(ite);
      //       // for(var i=0;i<this.ceshilist.length;i++){
      //       // }
      //       // this.drawRose(ite.value);
      //     });
      //   });
      //   console.log("ceshi", this.ceshilist);
      //   this.drawRose(this.ceshilist);
      // });
    },
    drawRose(yval) {
      var echarts = require("echarts");
      var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
      for (var i = 0; i < roseCharts.length; i++) {
        // if (this.shebeilist[i].status && this.shebeilist[i].status == "离线") {
        //   yanse = "#e6a23c";
        // }
        // if (this.shebeilist[i].status && this.shebeilist[i].status == "故障") {
        //   yanse = "#f56c6c";
        // }
        // if (this.shebeilist[i].status && this.shebeilist[i].status == "在线") {
        //   yanse = "#32d7ea";
        // }
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i]);
        let option = {
          series: [
            {
              // name: yval[i].unit,
              type: "gauge",
              // color: yanse || "#32d7ea",
              color: "#32d7ea",
              center: ["50%", "50%"],
              max: "10000",
              progress: {
                show: true,
                width: 10,
              },
              axisLine: {
                lineStyle: {
                  width: 10, // 宽度
                  color: [[1, "#2d4e7d"]], // 颜色
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                length: 3,
                distance: 0,
                lineStyle: {
                  width: 1,
                  color: "#fff",
                },
              },
              axisLabel: {
                distance: 12,
                color: "#999",
                fontSize: 7,
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 8,
                itemStyle: {
                  borderWidth: 0,
                  color: "#0f5fa8",
                  // borderColor:'#32d7ea'
                },
              },
              title: {
                show: false,
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                // color: yanse || "#32d7ea",
                color: "#32d7ea",
                offsetCenter: [0, "90%"],
              },
              data: [
                {
                  value: yval[i].device_value || 0,
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", myChart.resize);
      }
    },
    renyuan() {
      this.$router.push({ path: "/set" });
    },
    zuzhi() {
      this.$router.push({ path: "/organization" });
    },
    chaobiao() {
      this.$router.push({ path: "/meterreading" });
    },
    shishi() {
      this.$router.push({ path: "/realtime" });
    },
    yuzhi() {
      this.$router.push({ path: "/limit" });
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.setcabinetfun();
    },
  },
};
</script>


<style lang="less" scoped>
@import url("../../../static/zhuti.css");
.tableyang {
  /deep/ .el-table--border,
  .el-table--group {
    border: 1px solid transparent;
    border-top: 1px solid #055288;
  }

  /deep/ .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #055288;
  }

  /deep/ .el-table--border th.el-table__cell,
  .el-table__fixed-right-patch {
    border: 0px solid #055288;
    border-left: 1px solid #055288;
  }

  /deep/ .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-top: 1px solid #055288;
    border-right: 0px solid #055288;
    border-bottom: 0px solid #055288;
    border-left: 1px solid #055288;
  }

  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }

    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    th.el-table__cell {
      height: 45px;
      background-color: #0a2c43;
      color: #fff;
    }

    tr > td {
      height: 45px;
      background-color: #0a304b;
      color: #fff;
    }

    tr:hover > td {
      background-color: #0a2c43 !important;
    }

    tbody tr:hover > td {
      background-color: #0a2c43 !important;
    }
  }

  /deep/ .el-table th.el-table__cell.is-leaf {
    border: 1px solid #055288 !important;
    border-bottom: 0px solid #055288 !important;
    border-right: 0px solid #055288 !important;
  }

  /deep/ .el-table__body-wrapper {
    border-right: 1px solid #055288 !important;
  }

  /deep/ .el-table__header-wrapper {
    border-right: 1px solid #055288 !important;
  }

  /deep/ .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
    height: 16px;
  }

  /* 滚动条轨道 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.0313rem rgba(0, 0, 0, 0.3);
    border-radius: 0.0521rem;
    background-color: #08163d;
  }

  /* 滚动条没有滑块的轨道部分 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-track-piece {
    width: 6px;
  }

  /* 滚动条上的滚动滑块 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0.0521rem;
    -webkit-box-shadow: inset 0 0 0.0313rem rgba(0, 0, 0, 0.3);
    background-color: #074176;
  }

  /* 滚动条上的按钮 (上下箭头) */

  /deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
    width: 0.036rem;
    height: 0.036rem;
    background-color: #08163d;
  }
}
/deep/ .el-dialog__body {
  background-color: #0a2c43;
  color: white;
}
/deep/ .el-dialog__header {
  background-color: #0a2c43;
}
/deep/ .el-dialog__title {
  color: white;
}
// /deep/ .v-modal{
//   opacity: 0;
// }
.tableyang::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #08163d;
}

.tableyang::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #08163d;
}

.tableyang::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #074176;
}

#zhexianceshi {
  width: 100%;
  height: 200px;

  margin-bottom: 20px;
}
.qvshi {
  color: white;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 6px;
}
.bg-purple-dark {
  background: #093164;
}
.bg-purple {
  background: #13204f;
  border: 1px solid #295883;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 165px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .el-input__inner {
  background-color: rgb(0, 20, 66);
  color: #fff;
  margin-left: 10px;
}
</style>
